<template>
  <div class="charts">
    <div class="lineChartBox">
      <acManageline></acManageline>
    </div>

    <div class="pieChartBox">
      <acManagepie></acManagepie>
    </div>

    <div class="barChartBox">
      <acManagebar></acManagebar>
    </div>
  </div>
</template>
<script>
import acManageline from '@/components/acManageline.vue'
import acManagepie from '@/components/acManagepie.vue'
import acManagebar from '@/components/acManagebar.vue'
export default {
  components: {
    acManageline: acManageline,
    acManagepie: acManagepie,
    acManagebar: acManagebar
  }
}
</script>
<style lang="less" scoped>
.charts {
  display: flex;
  //align-items: center;
  justify-content: space-around;
  //padding-top: 10px;
  padding-left: 10px;
  height: 45vh;
  //background-color: #41FFAD;
  width: 82vw;
  .lineChartBox {
    flex: 1;
    margin-right: 5px;
    height: 100%;
    background-color: rgba(137, 2, 2, 0.32);
    border: 1px solid rgb(255, 0, 14);
    .lineTitle {
      color: #fff;
      font-size: 0.375rem;
      font-weight: 900;
      font-family: monospace;
      background-color: rgb(182, 1, 1);
      height: 0.625rem;
      line-height: 0.625rem;
      padding-left: 0.25rem;
    }
    .acManageLineChart {
      width: 100%;
      height: 4.35rem;
      overflow: hidden;
    }
  }
  .pieChartBox {
    flex: 1;
    margin-right: 10px;
    height: 100%;
    background-color: rgba(137, 2, 2, 0.32);
    border: 1px solid rgb(255, 0, 14);
    .pieTitle {
      color: #fff;
      font-size: 0.375rem;
      font-weight: 900;
      font-family: monospace;
      background-color: rgb(182, 1, 1);
      height: 0.625rem;
      line-height: 0.625rem;
      padding-left: 0.25rem;
    }
    .acManagePieChart {
      width: 100%;
      height: 4.35rem;
      overflow: hidden;
    }
  }
  .barChartBox {
    flex: 1;
    margin-right: 10px;
    height: 100%;
    background-color: rgba(137, 2, 2, 0.32);
    border: 1px solid rgb(255, 0, 14);
    .barTitle {
      color: #fff;
      font-size: 0.375rem;
      font-weight: 900;
      font-family: monospace;
      background-color: rgb(182, 1, 1);
      height: 0.625rem;
      line-height: 0.625rem;
      padding-left: 0.25rem;
    }
    .acManageBarChart {
      width: 100%;
      height: 4.35rem;
      overflow: hidden;
    }
  }
}
</style>
